<template>
  <div class="myPerformance">
    <!--    导航开始-->

    <commonHeader
      :title="title"
      :subtitle="performanceMsg.school_id*1>0?subtitle:''"
      @goBack="goBack()"
      @goSubtitle="goSubtitle()">
    </commonHeader>
    <!--    内容-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="content">
        <!--    总收益 总支出-->
        <div class="total">
          <!--        年月-->
          <div class="year borderBottom flex-space-center" @click="chooseDate()">
            {{defaultDate}}
            <div class="downImg flex-space-center">
              <img src="http://job.dayinyun.com/down.png" alt="">
            </div>
          </div>
          <!--        本月收益和支出-->
          <div class="month flex-space-between">
            <div class="monthMoney flex-space-center">
              <h4>本月金额</h4>
              <h3 class="income">{{performanceMsg.this_month_num?performanceMsg.this_month_num:0}}</h3>
            </div>
            <div class="line"></div>
            <div class="monthMoney flex-space-center">
              <h4>上月金额</h4>
              <h3 class="expend">{{performanceMsg.last_month_num?performanceMsg.last_month_num:0}}</h3>
            </div>
          </div>
        </div>
<!--        绩效列表-->
        <div class="billFilter">
          <div v-if="performanceList&&performanceList.length*1>0">
            <van-list
              v-model="loading"
              :finished="finished"
              :offset="20"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="billList">
                <div class="listItems borderBottom flex-space-between" v-for="item in performanceList" :key="item.id">
                  <div class="listItemLeft">
                    <!--              被邀请人信息-->
                    <div>{{item.invita_name}}  {{item.invita_tel}}</div>
                    <!--              被邀请人时间-->
                    <div class="time">{{item.created_at}}</div>
                  </div>
                  <!--            明细价格-->
                  <!--            收入-->
                  <div class="listItemsPrice colorPrice">+ {{item.bonus | priceIntFilter}}</div>
                </div>
              </div>
            </van-list>
          </div>
          <div v-else class="noData flex-space-center">
            暂无数据！
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <!--    弹框-->
    <van-popup v-model="dataTimeShow" position="bottom" round>
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="dataTimeConfirm"
        @cancel="dataTimeCancel"
      />
    </van-popup>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {GETMYPERFORMANCE} from '../../apis/oldUniversity';
  export default {
    name:"myPerformance",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"我的绩效",//标题
        subtitle:'报名码',//副标题
        performanceMsg:{},//账单页面所有数据
        performanceList:[],//账单明细列表
        // 选择时间弹框配置
        minDate: new Date(2018, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        dataTimeShow:false,//选择时间弹出层
        years:'',//默认当前时间
        defaultDate:this.formatDate(new Date(), 'yyyy年MM月'),//默认年月日
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,
        page:1,//分页页数
        pageSize:10,//每页数据
      }
    },
    mounted() {
      this.routerType = this.$route.query.routerType?this.$route.query.routerType:1
      this.years = this.formatDate(new Date(), 'yyyy-MM').split('-')[0] + this.formatDate(new Date(), 'yyyy-MM').split('-')[1];//默认当前时间
      this.getMyPerformance();//获取账单列表
    },
    methods:{
      // 返回
      goBack(){
        this.$router.back()
      },
      // 去报名码页面
      goSubtitle(){
        // 报名码信息
        let performanceCode = {
          school_id:this.performanceMsg.school_id,//学校id
          school_name:this.performanceMsg.school_name,//学校名字
          school_tel:this.performanceMsg.school_tel,//手机号
        }
        this.removeStore("performanceCode")
        this.setStore("performanceCode",JSON.stringify(performanceCode))
        this.$router.push({
          name:"myPerformanceCode",
        })
      },
      // 弹框  选择时间
      chooseDate(){
        this.dataTimeShow = true;//选择时间弹框显示
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      // 选择时间点击确认
      dataTimeConfirm(value){
        this.defaultDate = this.formatDate(new Date(value), 'yyyy年MM月')
        this.years = this.formatDate(new Date(value), 'yyyy/MM').split('/')[0] + this.formatDate(new Date(value), 'yyyy/MM').split('/')[1];//默认当前时间
        this.dataTimeShow = false;//选择时间弹框关闭
        this.performanceList = [];//初始化
        this.getMyPerformance()// 获取账单列表
      },
      // 选择时间点击取消
      dataTimeCancel(value){
        this.dataTimeShow = false;//选择时间弹框关闭
      },

      //------------------------------- 接口开始--------------------
      // 获取我的绩效列表
      getMyPerformance(){
        let getMyPerformance = GETMYPERFORMANCE
        let params = {
          month:this.years,
          page:this.page,//分页页数
        }
        getMyPerformance(params)
          .then(res => {
            if(res.data.code*1===200){
              this.performanceMsg = res.data.data;
              // 下拉刷新
              if (this.refreshing) {
                this.performanceList = [];
                this.refreshing = false;
              }
              this.loading = false;
              const performanceList = res.data.data.list;//每日挖矿列表
              if(performanceList == null || performanceList.length*1 === 0){
                this.finished = true
                return
              }
              if(performanceList.length*1 < this.pageSize){
                this.finished = true
              }
              if(this.page*1 == 1){
                this.performanceList = performanceList
              }else{
                this.performanceList = this.performanceList.concat(performanceList)
              }

            } else {
              this.$toast(res.data.message);
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getMyPerformance();//获取账单列表
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getMyPerformance();//获取账单列表
      },
      // ----------------------------接口结束--------------------------
    }
  }
</script>

<style lang='less' scoped>
  @import (reference) url(../../assets/less/common);
  .myPerformance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    overflow-y: scroll;
    padding-top:1.38rem;
    box-sizing: border-box;
    .content{
      width:100%;
      padding:0.3rem;
      box-sizing: border-box;
      overflow-y: auto;
      .total{
        width:100%;
        border-radius:0.1rem ;
        background:#232323;
        .year{
          width:100%;
          height:1.12rem;
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.36rem;
          color:#FFFFFF;
          .downImg{
            width:0.27rem;
            height: 0.34rem;
            margin-left:0.2rem;
            img{
              width:100%;
              height:auto;
            }
          }
        }
        .month{
          width: 100%;
          padding:0.45rem 0;
          box-sizing: border-box;
          .monthMoney{
            width:49%;
            flex-direction: column;
            h4{
              font-size:@fontSize28;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.3rem;
              color:#FFFFFF;
            }
            h3{
              font-size:@fontSize40;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.4rem;
              color:#FFFFFF;
              margin-top:0.33rem;
            }
            h3.income{
              color:#FD0000;
            }
          }
          .line{
            width:0.02rem;
            height:1.32rem;
            background: rgba(0,0,0,0.3);
          }
        }
      }
      .billFilter{
        width:100%;
        border-radius:0.1rem ;
        background:#232323;
        margin-top:0.14rem;
        .billList{
          width:100%;
          padding:0 0.3rem;
          box-sizing: border-box;
          .listItems{
            width:100%;
            padding:0.4rem 0;
            box-sizing: border-box;
            .listItemLeft{
              font-size:@fontSize34;
              font-family:@fontFamily400;
              font-weight:@fontWeight500;
              line-height:0.36rem;
              color:#FFFFFF;
              .time{
                font-size:@fontSize30;
                font-family:@fontFamily400;
                font-weight:@fontWeight400;
                line-height:0.36rem;
                color:#FFFFFF;
                margin-top: 0.16rem;
              }
            }
            .listItemsPrice{
              font-size:@fontSize34;
              font-family:@fontFamily400;
              font-weight:@fontWeight600;
              line-height:0.36rem;
              color:#FFFFFF;
            }
            .colorPrice{
              color:#FD0000;
            }
          }
        }
        .noData{
          width:100%;
          height:3rem;
          color:#ffffff;
        }
      }
    }
    .borderBottom{
      border-bottom:0.02rem solid #000000;
    }
  }
</style>
